<template>
  <view class="w100 bg-gray flex-sub flex flex-col">
    <u-navbar
      v-if="isSub"
      :safeAreaInsetTop="true"
      title="计划列表"
      :fixed="true"
      :autoBack="true"
      left-text="返回"
    >
    </u-navbar>
    <view
      :style="{ 'margin-top': isSub ? '30px' : '0' }"
      class="w100 flex-sub padding-lr padding-top flex-center flex-direction"
    >
      <u-search
        class="bg-white flex-0 w100 padding"
        shape="square"
        placeholder="输入计划名称"
        v-model="keyword"
        @search="queryList(1)"
        @custom="queryList(1)"
      ></u-search>
      <view
        style="margin-bottom: -30px"
        class="bg-white w100 padding-lr text-sm"
      >
        <u-cell :border="false">
          <view class="text-df text-bold" slot="title">计划列表</view>
          <view class="text-grey text-sm" slot="value">总计{{ total }}</view>
        </u-cell>
        <Detail :showDetail.sync="showDetail" :info="this.currentInfo"></Detail>
      </view>
      <z-paging
        class="flex-sub padding-lr bg-white"
        ref="paging"
        :default-page-size="limit"
        v-model="planList"
        :refresher-enabled="true"
        :auto-clean-list-when-reload="false"
        :auto-scroll-to-top-when-reload="true"
        :show-default-loading-more-text="true"
        loading-more-no-more-text="没有更多了"
        :fixed="false"
        :pagingStyle="{
          height: `calc( 100vh - ${statusBarHeight + tabHeight}px )`,
        }"
        @query="queryList"
      >
        <view
          class="rcl-notice__item"
          v-for="(item, index) in planList"
          :key="index"
          @click="accountClick(index)"
        >
          <u-cell-group>
            <u-cell :border="false">
              <view class="flex text-cut" slot="title"
                ><u-tag :text="item.status" size="mini" type="primary" />
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  {{ item.name }}
                </view>
              </view>
              <view
                class="text-sm flex margin-top justify-between"
                slot="label"
              >
                <view class="flex-col">
                  <view>预算</view>
                  <view>{{ item.budget }}</view>
                </view>
                <view class="flex-col align-center">
                  <view>消耗</view>
                  <view>{{ item.cost }}</view>
                </view>
                <view class="flex-col align-end">
                  <view>出价</view>
                  <view>{{ item.cpa_bid }}</view>
                </view>
              </view>
              <view
                class="text-sm flex margin-top justify-between"
                slot="label"
              >
                <view class="flex-col">
                  <view>有效ROI</view>
                  <view>{{ item.effective_roi }}</view>
                </view>
                <view class="flex-col align-center">
                  <view>户余额</view>
                  <view>{{ item.cash }}</view>
                </view>
                <view class="flex-col align-end">
                  <view>评价数</view>
                  <view>{{ item.comment_count }}</view>
                </view>
              </view>
            </u-cell>
            <u-cell
              style="margin-top: -10px"
              :border="false"
              :value="isAdmin ? item.company_account : '查看详情'"
              :right-icon="isAdmin ? '' : 'arrow-right'"
              :isLink="true"
              :disabled="true"
              arrow-direction="right"
            >
              <view style="width: 200px" class="text-sm text-cut" slot="title">
                户名: {{ item.advertiser_name }}
              </view>
            </u-cell>
          </u-cell-group>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { planList, queryPlan } from "@/api";
import Detail from "./detail.vue";
import { mapGetters } from "vuex";

export default {
  components: { Detail },
  props: {
    isSub: {
      type: Boolean,
      default: false,
    },
    adUserId: {
      type: String,
    },
    planId: {
      type: String,
    },
  },
  data() {
    return {
      showDetail: false,
      currentInfo: {},
      total: 0,
      page: 1,
      limit: 10,
      keyword: "",
      statusBarHeight: 10,
      tabHeight: 0,
      planList: [],
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  onLoad(option) {},
  methods: {
    accountClick(idx) {
      if (this.isAdmin) return;
      this.currentInfo = this.planList[idx];
      this.showDetail = true;
    },

    queryList(pageNo, pageSize) {
      this.page = pageNo;
      this.handleGetList();
    },

    handleGetList() {
      const api = this.isSub && !this.planId ? queryPlan : planList;
      api({
        channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
        ad_user_id: this.adUserId && +this.adUserId,
        plan_id: this.planId && +this.planId,
        plan_status: "",
        cost_order: 2,
        page: 1,
        page: this.page,
        page_size: this.limit,
        start_date: dayjs().format("YYYY-MM-DD"),
        end_date: dayjs().format("YYYY-MM-DD"),
        keyword: this.keyword,
        name: this.keyword,
      }).then(({ data }) => {
        this.$refs.paging.complete(data.list);
        this.total = data.total;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
